{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title }} - IoT智能家居控制系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-award me-2"></i>{{ title }}</h2>
            <a href="{% url 'devices:brand_list' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>返回列表
            </a>
        </div>

        <!-- 表单 -->
        <div class="card">
            <div class="card-body">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="row">
                        <!-- 基本信息 -->
                        <div class="col-md-6">
                            <h5 class="mb-3"><i class="bi bi-info-circle me-2"></i>基本信息</h5>
                            
                            <div class="mb-3">
                                <label for="{{ form.name.id_for_label }}" class="form-label">
                                    {{ form.name.label }} <span class="text-danger">*</span>
                                </label>
                                {{ form.name }}
                                {% if form.name.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.name.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.country.id_for_label }}" class="form-label">
                                    {{ form.country.label }}
                                </label>
                                {{ form.country }}
                                {% if form.country.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.country.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.website.id_for_label }}" class="form-label">
                                    {{ form.website.label }}
                                </label>
                                {{ form.website }}
                                {% if form.website.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.website.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">请输入完整的网址，如：https://www.example.com</div>
                            </div>
                        </div>

                        <!-- 品牌标识和描述 -->
                        <div class="col-md-6">
                            <h5 class="mb-3"><i class="bi bi-image me-2"></i>品牌标识</h5>
                            
                            <div class="mb-3">
                                <label for="{{ form.logo.id_for_label }}" class="form-label">
                                    {{ form.logo.label }}
                                </label>
                                {{ form.logo }}
                                {% if form.logo.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.logo.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">支持 JPG、PNG 格式，建议尺寸 200x200 像素</div>
                                
                                <!-- 当前logo预览 -->
                                {% if form.instance.logo %}
                                <div class="mt-2">
                                    <img src="{{ form.instance.logo.url }}" alt="当前logo" 
                                         class="img-thumbnail" style="max-width: 100px; max-height: 100px;">
                                    <div class="form-text">当前logo</div>
                                </div>
                                {% endif %}
                            </div>

                            <div class="mb-3">
                                <label for="{{ form.description.id_for_label }}" class="form-label">
                                    {{ form.description.label }}
                                </label>
                                {{ form.description }}
                                {% if form.description.errors %}
                                    <div class="text-danger small mt-1">
                                        {% for error in form.description.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                <div class="form-text">简要描述该品牌的特点或主要产品</div>
                            </div>
                        </div>
                    </div>

                    <!-- 表单按钮 -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{% url 'devices:brand_list' %}" class="btn btn-secondary">
                                    <i class="bi bi-x-circle me-1"></i>取消
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-check-circle me-1"></i>保存
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 帮助信息 -->
        <div class="card mt-4">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-question-circle me-2"></i>填写说明</h6>
            </div>
            <div class="card-body">
                <ul class="mb-0">
                    <li><strong>品牌名称</strong>：设备制造商的品牌名称，如小米、华为等</li>
                    <li><strong>所属国家</strong>：品牌所属的国家或地区</li>
                    <li><strong>官方网站</strong>：品牌的官方网站地址</li>
                    <li><strong>品牌Logo</strong>：品牌的标识图片，用于在系统中显示</li>
                    <li><strong>品牌描述</strong>：对品牌的简要介绍和说明</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 表单验证
    $('form').on('submit', function(e) {
        var isValid = true;
        var name = $('[name="name"]').val();
        
        if (!name.trim()) {
            isValid = false;
            $('[name="name"]').addClass('is-invalid');
            alert('请输入品牌名称');
        } else {
            $('[name="name"]').removeClass('is-invalid');
        }
        
        if (!isValid) {
            e.preventDefault();
        }
    });
    
    // 实时验证
    $('input, textarea').on('input', function() {
        if ($(this).val().trim()) {
            $(this).removeClass('is-invalid');
        }
    });
    
    // Logo文件预览
    $('[name="logo"]').on('change', function(e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                // 移除旧的预览
                $('.logo-preview').remove();
                
                // 添加新的预览
                var preview = $('<div class="logo-preview mt-2">' +
                    '<img src="' + e.target.result + '" alt="Logo预览" ' +
                    'class="img-thumbnail" style="max-width: 100px; max-height: 100px;">' +
                    '<div class="form-text">Logo预览</div>' +
                    '</div>');
                $('[name="logo"]').parent().append(preview);
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>
{% endblock %}